<template>
  <div>
    <el-divider content-position="center">轴向推力</el-divider>
    <div
      style="
        display: flex;
        justify-content: flex-end;
        margin-bottom: 20px;
        margin-right: 20px;
      "
    >
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="mini"
        @click="handleAddatmosphere"
        >添加</el-button
      >
    </div>
    <el-table
      :data="ttaskThrustList"
      :row-class-name="rowDetailIndex"
      ref="tProductFailureDetail"
      max-height="300"
      border
    >
      <el-table-column label="序号" align="center" prop="index" width="50" />
      <el-table-column
        label="名称"
        prop="performanceName"
        min-width="150"
        show-overflow-tooltip
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="纯气流力 kN"
        prop="pureGasForce"
        min-width="150"
        show-overflow-tooltip
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="F（有平衡管） kN"
        prop="forceWithBalancePipe"
        min-width="150"
        show-overflow-tooltip
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="F（无平衡管） kN"
        prop="forceWithoutBalancePipe"
        min-width="150"
        show-overflow-tooltip
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleUpdateatmosphere(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleDeleteatmosphere(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
    :close-on-click-modal="false"
      title="轴向推力"
      :visible.sync="Open"
      width="800px"
      append-to-body
      v-dialogDrag
    >
      <el-form
        ref="forms"
        :model="forms"
        label-width="150px"
        :inline="true"
        class="addData"
      >
        <el-form-item label="名称" prop="performanceName">
          <el-input v-model="forms.performanceName" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="纯气流力 kN" prop="pureGasForce">
          <el-input
            v-model="forms.pureGasForce"
            placeholder="请输入纯气流力 kN"
          />
        </el-form-item>
        <el-form-item label="F（有平衡管） kN" prop="forceWithBalancePipe">
          <el-input
            v-model="forms.forceWithBalancePipe"
            placeholder="请输入绝对温度 K"
          />
        </el-form-item>
        <el-form-item label="F（无平衡管） kN" prop="forceWithoutBalancePipe">
          <el-input
            v-model="forms.forceWithoutBalancePipe"
            placeholder="请输入F（无平衡管） kN"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormatmosphere"
          >确 定</el-button
        >
        <el-button @click="cancelatmosphere">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentEditIndex: -1,
      ttaskThrustList: [],
      Open: false,
      forms: {},
    };
  },
      props: {
  formData: {
    type: Array,
    default: () => [],
  },
},
watch: {
  formData: {
    immediate: true,
    deep: true,
    handler(newVal) {
      // 更新组件内部数据
      this.ttaskThrustList = JSON.parse(JSON.stringify(newVal));
    },
  },
},
  methods: {
    rowDetailIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    handleAddatmosphere() {
      this.Open = true;
      this.currentEditIndex = -1;
      this.resetform();
    },
    // 修改
    handleUpdateatmosphere(row) {
      this.Open = true;
      this.forms = { ...row };

      // 查找当前编辑项的索引
      if (row.id) {
        this.currentEditIndex = this.ttaskThrustList.findIndex(
          (item) => item.id === row.id
        );
      } else {
        this.currentEditIndex = this.ttaskThrustList.findIndex((item) =>
          this.isSameRow(item, row)
        );
      }
    },

    // 删除
    handleDeleteatmosphere(row) {
      this.$confirm("确认删除轴向推力数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (row.id) {
            // 根据ID删除
            const index = this.ttaskThrustList.findIndex(
              (item) => item.id === row.id
            );
            if (index !== -1) {
              this.ttaskThrustList.splice(index, 1);
            }
          } else {
            // 没有ID，根据索引删除
            const index = this.ttaskThrustList.findIndex((item) =>
              this.isSameRow(item, row)
            );
            if (index !== -1) {
              this.ttaskThrustList.splice(index, 1);
            }
          }
          this.$message.success("删除成功!");
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    resetform() {
      this.forms = {
        performanceName: undefined,
        pureGasForce: undefined,
        forceWithBalancePipe: undefined,
        forceWithoutBalancePipe: undefined,
      };
    },
    // 生成临时ID
    generateTempId() {
      return "temp_" + Date.now() + Math.floor(Math.random() * 1000);
    },
    // 判断两行数据是否相同
    isSameRow(row1, row2) {
      const keys = Object.keys(row1);
      return keys.every((key) => row1[key] === row2[key]);
    },
    submitFormatmosphere() {
      this.$refs.forms.validate((valid) => {
        if (valid) {
          const formData = { ...this.forms };
          if (!this.ttaskThrustList) {
            this.ttaskThrustList = [];
          }
          if (this.currentEditIndex === -1) {
            // 新增操作
            if (!formData.id) {
              formData.temp_id = this.generateTempId(); // 为新增数据生成临时ID
            }

            this.ttaskThrustList.push(formData);
          } else {
            // 修改操作
            if (formData.id) {
              // 根据ID修改
              const index = this.ttaskThrustList.findIndex(
                (item) => item.id === formData.id
              );
              if (index !== -1) {
                this.ttaskThrustList.splice(index, 1, formData);
              }
            } else {
              // 没有ID，根据行数据匹配修改
              this.ttaskThrustList.splice(this.currentEditIndex, 1, formData);
            }
          }
          this.$emit("getTtaskThrustList", this.ttaskThrustList);
          this.Open = false;
          this.resetform();
        }
      });
    },
    cancelatmosphere() {
      this.Open = false;
      this.currentEditIndex = -1;
      this.resetform();
    },
  },
};
</script>
<style scoped lang="scss"></style>
